import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import { Row, Col, Card } from 'antd';
import { Bar } from '@/components/Charts';

import './Analysis.less';

const IntroduceRow = React.lazy(() => import('./IntroduceRow'));
const ProportionSales = React.lazy(() => import('./ProportionSales'));
const TopSearch = React.lazy(() => import('./TopSearch'));

@connect(({ chart, loading }) => ({
  chart,
  loading: loading.effects['chart/fetch'],
}))
class Analysis extends Component {
  state = {
    salesType: 'all',
    currentTabKey: '',
  };
  componentDidMount() {
    const { dispatch } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'chart/fetch',
      });
    });
  }
  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'chart/clear',
    });
    cancelAnimationFrame(this.reqRef);
    clearTimeout(this.timeoutId);
  }

  handleChangeSalesType = e => {
    this.setState({
      salesType: e.target.value,
    });
  };
  render() {
    const { salesType } = this.state;
    const { chart, loading } = this.props;
    const {
      visitData,
      visitData2,
      salesData,
      searchData,
      // offlineData,
      // offlineChartData,
      salesTypeData,
      salesTypeDataOnline,
      salesTypeDataOffline,
    } = chart;
    let salesPieData;

    if (salesType === 'all') {
      salesPieData = salesTypeData;
    } else {
      salesPieData = salesType === 'online' ? salesTypeDataOnline : salesTypeDataOffline;
    }
    return (
      <div className="wrap" style={{ backgroundColor: '#f0f2f5' }}>
        <Suspense fallback={null}>
          <IntroduceRow loading={loading} visitData={visitData} />
        </Suspense>
        <Row gutter={24} style={{ marginBottom: 24 }}>
          <Col xl={12} lg={24} md={24} sm={24} xs={24}>
            <Suspense fallback={null}>
              <TopSearch
                loading={loading}
                visitData2={visitData2}
                salesType={salesType}
                selectDate={this.selectDate}
                searchData={searchData}
                handleChangeSalesType={this.handleChangeSalesType}
              />
            </Suspense>
          </Col>
          <Col xl={12} lg={24} md={24} sm={24} xs={24}>
            <Suspense fallback={null}>
              <ProportionSales
                salesType={salesType}
                loading={loading}
                salesPieData={salesPieData}
                handleChangeSalesType={this.handleChangeSalesType}
              />
            </Suspense>
          </Col>
        </Row>

        <Row gutter={24}>
          <Col xl={12} lg={24} md={24} sm={24} xs={24}>
            <Card loading={loading} bordered={false} title="按金额大小统计">
              <Bar
                height={295}
                // title="按金额大小统计"
                data={salesData}
              />
            </Card>
          </Col>
          <Col xl={12} lg={24} md={24} sm={24} xs={24}>
            <Card loading={loading} bordered={false} title="按期限长短统计">
              <Bar
                height={295}
                // title="按期限长短统计"
                data={salesData}
              />
            </Card>
          </Col>
        </Row>
      </div>
    );
  }
}

export default Analysis;
